<template>
  <div id="hotGame" >
    <h2 class="fontsize-24 line">{{$t('m.hot')}}<router-link to="/home/game"  style="color: #9e5bdf">{{$t('m.game')}}</router-link></h2>
    <div id="home-game">
     <a href="" v-for="item in game.slice(0,7)" :key="item.gameId">
       <router-link :to="{name:'gameInfo',params: {id: item.gameNameEn}}" >
        <div class="upImgCom">
          <img class="home-game-box" :title="item.gameName" :src="item.gameImg" alt=""/>
        </div>
        <p class="tab-hidden titleName" style="font-weight: 500;margin: 5px 0">{{item.gameName}}</p>
        <div class="lab-hidden">
          <span class="lab" v-for="tags in (item.gameTags || ' ').split(' ').splice(0,3)" :key="tags.id">{{tags}}</span>
        </div>
       </router-link>
     </a>
    </div>
  </div>
</template>

<script>
  import api from '../../model/api'

  export default {
    name: 'hotGame',
    data(){
      return {
        // game:[{gameId:'1',gameName:'赛博朋克2077',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameGen:['开放世界','第一人称射击',]},{gameId:'2',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'CSGO',gameGen:['开放世界','第一人称射击',]},{gameId:'3',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'魔兽世界',gameGen:['开放世界','第一人称射击',]},{gameId:'4',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'跑跑卡丁车',gameGen:['开放世界','第一人称射击',]},{gameId:'5',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'泡泡堂',gameGen:['开放世界','第一人称射击',]},{gameId:'6',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'永恒之塔',gameGen:['开放世界','第一人称射击',]},{gameId:'7',gameImg:'https://imgs.gamersky.com/upimg/new_preview/2020/12/02/origin_b_202012021431525575_b.jpg',gameName:'糖豆人',gameGen:['开放世界','第一人称射击',]},]
        game: [],
      }
    },
    methods:{
     async getGames(){
        api.getGames().then(res => {
          this.game = res.data
          return res.data
        })
      },
    },
    created(){
      this.getGames()
    },


    // mounted () {
    //   this.$router.push({
    //     name:'gameList',
    //     params: { gameName: game.gameName,gameId: game.gameId}
    //
    //   })
    // }
  }

</script>

<style lang="less" scoped>
  #hotGame{
    font-size: 0;
    /*width: 100%;*/
    /*height: 345px;*/
    /*background-color: #4dffd3;*/
    /*overflow: hidden;*/
    margin-top: 60px;
    width: 100%;
    /*background-color: red;*/
  }
  /******************/
  h2{
    margin-bottom: 10px;
  }
  .boxOfi{
    position: absolute;
    right: 15px;
  }

  .top{
    width: 0;
    height: 0;
    border-left: 30px solid #313131;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #313131;
    position: absolute;
    border-radius: 6px 0 0 0;
    z-index: +1;
  }
  .topNum{
    position: absolute;
    font-size: 36px;
    font-style: italic;
    font-weight: 900;
    top: -5px;
    left: 2px;
    text-shadow: 3px 1px 0 #000000;
    z-index: +2;
  }
  #home-game {
    width: 100%;
    display: flex;
    /*background-color: red;*/
    flex-wrap: wrap;
    .home-game-box {
      width: 170px;
      height: 238px;
      border-radius: 6px;
      transition: all 0.1s ease-in-out;
    }
    /*.home-game-box:hover{*/
    /*  box-shadow: -5px 5px 0 #b4b4b4;*/
    /*  transform: translate3d(5px, -5px, 0);*/
    /*}*/
    .upImgCom{
      border-radius: 6px;
      margin-right: 12.4px;
      transition: all 0.1s ease-in-out;
    }
    .upImgCom:hover{
      box-shadow: -5px 5px 0 #ce52ff;
      transform: translate3d(5px, -5px, 0);
    }
    a {
      display: inline-block;
      position: relative;
      margin-bottom: 5px;
    }
  }
</style>

